import { useState, useEffect, lazy } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
/* -------------------------------------------------------- antd -- */
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
/* -------------------------------------------------------- Function -- */
import getRouter from '@com/react/router/getRouter'
import setRouter from '@com/react/router/setRouter'
/* -------------------------------------------------------- Sync Component -- */
import Menu from '#frame/radio-menu/cpt/menu'
const UserControl = lazy(()=>import('#frame/cpt/user-control'))
/* -------------------------------------------------------- Declare -- */
const { $, $fn, $config } = window
/* -------------------------------------------------------- Async Component -- */
const Scroll 	= lazy(()=>import('@tp/scroll'))
const Router 	= lazy(()=>import('@com/react/router/router'))
/**
 * 只有左侧菜单的后台模板框架
 * @param {Boolean} openAll 		# 是否展开全部，默认不展开
 */
const Index = ({ width=200, openAll, rootPath = $config?.menu?.root, skip, logo, topSlot } ) => {
	const [ data, setData ] = useState([])
	const [ menuData, setMenuData ] = useState([])
	const [ show, setShow ] = useState($fn.local('menu-expand'))
	const [ key, setKey ] = useState(0)
	const navigate = useNavigate( )
	const location = useLocation()
	
	useEffect(()=>{
		if(!$fn.getToken()){ return navigate('/login', { replace:true }) }
		$.getMenu().then( data => setData( getRouter(data, rootPath , openAll) ) )
	},[ rootPath, openAll ]) // eslint-disable-line
	
	useEffect(()=>{
		setTimeout(()=>{
			const $active = document.querySelector('#active')
			if($active){
				document.querySelector('#scroll').scrollTop = $active.offsetTop
			}
		},300)
		window.refreshRouter = () => setKey(key => key + 1)
		window.refershMenu = () => {
			$fn.sessionRemove('menu')
			$.getMenu().then( data => getRouter(data, rootPath, openAll ) )
		}
	}, [rootPath, openAll])
	
	useEffect(()=>{
		const d = setRouter(data, location.pathname)
		setMenuData([...d])
	},[ location, data ])
	
	
	const onExpand = () => {
		setShow(value => {
			let v = !value
			$fn.local('menu-expand',v)
			return v
		})
	}
	
	return (
		<section className='fix_full fv'>
			{/* Header */}
			<header className='h50 bcf fx'>
				<div style={{width, fontSize:18}} className='h fxmc cp tap c0 omit' onClick={()=> skip ? navigate(skip, { replace:true }) : null }>{ logo }</div>
				<span className='cp c0 f18 tap h fxmc' style={{width:50}} onClick={onExpand}>
					{ show ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />  }
				</span>
				{ topSlot ? topSlot : <UserControl api='user/logout'/> }
			</header>
			<div className='ex fx' style={{marginTop:1}}>
				{/* 菜单 */}
				<div className='h rel bcf' style={{width}} hidden={show}>
					<Scroll id='scroll' scroll='oys'>
						<Menu data={menuData}/>
					</Scroll>
				</div>
				{/* 路由 */}
				<div className='ex rel' style={{margin:5}}>
					<Router data={data} rootPath={rootPath} key={key}/>
				</div>
			</div>
		</section>
	)
}

export default Index